
<template>
  <a-layout id="components-layout-demo-responsive">
    欢迎--{{username}}--来到
    <a-layout>
        <div :style="{ padding: '24px', background: '#fff', minHeight: '250px' }">

          <a-button type="primary" @click="showModal">
            添加用户<a-icon type="user-add" />
          </a-button>
          <a-modal v-model="visible" title="添加用户" @ok="handleOk" >
            <p>用户名 <input type="text" v-model="username"> </p>
            <p>密码 &nbsp;&nbsp;&nbsp;<input type="text" v-model="password"> </p>
            <p>手机号 <input type="text" v-model="phone"> </p>
            <p>邮箱 &nbsp;&nbsp;&nbsp;<input type="text" v-model="email"> </p>
          </a-modal>

        </div>
      <a-layout-footer style="textAlign: center">
        Ant Design ©2018 Created by Ant UED

      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script>
  export default {
    data(){
      return{
        visible: false,
        Visible: false,
        user_li:'',
        username:"",
        email:'',
        phone:"",
        password:'',
        username:sessionStorage.getItem('username')
      }
    },
    methods: {
      onCollapse(collapsed, type) {
        console.log(collapsed, type);
      },
      onBreakpoint(broken) {
        console.log(broken);
      },
      showModal() {
        this.visible = true;
      },
      handleOk(e) {
        console.log(e);
        this.visible = false;
        console.log(this.username)
        // let f = new FormData()
        this.$axios.post('http://127.0.0.1:8000/user/',{'username':this.username,'password':this.password,'phone':this.phone,'email':this.email})
          .then(res=>{
            console.log(res.data)
          })
      },
      

    },
  };
</script>

<style>
  #components-layout-demo-responsive .logo {
    height: 32px;
    background: rgba(255, 255, 255, 0.37);
    margin: 16px;
  }
</style>

